<template>
  <div class="func-comp-form">

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Collapse :value="[0,1]">
          <Panel>
            表单域配置
            <div slot="content">
              <Form :label-width="120">

                <FormItem label="标签文本">
                  <Input type="text" size="small" v-model="formItemConfig.label"/>
                </FormItem>
                <FormItem label="标签宽度">
                  <InputNumber size="small" :max="1000" :min="0" v-model="formItemConfig.labelWidth" :active-change="false"></InputNumber>
                </FormItem>
                <FormItem label="隐藏标签">
                  <i-switch size="small" v-model="formItemConfig.hiddenLabel"></i-switch>
                </FormItem>
                <FormItem label="隐藏此表单域">
                  <i-switch size="small" v-model="formItemConfig.hidden"></i-switch>
                </FormItem>
              </Form>
            </div>
          </Panel>
          <Panel>
            功能按钮配置
            <div slot="content">
              <Form :label-width="100">
                <Button size="small" type="primary" @click="addButton">添加按钮</Button>
                <div class="m-b-5px"></div>
                <draggable tag="Collapse" :component-data="{attrs: {accordion: true}}" :list="widgetConfig.buttons" handle=".ivu-collapse-header">
                  <Panel :name="$PnUtil.uuid()" v-for="(row, index) in widgetConfig.buttons" :key="index">
                    {{row.label ? row.label : '未设置按钮标签'}}
                    <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteButtonItem(index)"><Icon type="md-trash" /></a>
                    <div slot="content">
                      <FormItem label="类型">
                        <Select size="small" v-model="row.type">
                          <Option value="default">default</Option>
                          <Option value="primary">primary</Option>
                          <Option value="dashed">dashed</Option>
                          <Option value="text">text</Option>
                          <Option value="info">info</Option>
                          <Option value="success">success</Option>
                          <Option value="warning">warning</Option>
                          <Option value="error">error</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="扩展Class">
                        <Input size="small" v-model="row.customClass"/>
                      </FormItem>
                      <FormItem label="标签">
                        <Input size="small" v-model="row.label" placeholder=""/>
                      </FormItem>
                      <FormItem label="幽灵按钮">
                        <i-switch size="small" v-model="row.ghost"></i-switch>
                      </FormItem>
                      <FormItem label="尺寸">
                        <Select size="small" v-model="row.size">
                          <Option value="default">默认</Option>
                          <Option value="large">大号</Option>
                          <Option value="small">小号</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="按钮形状">
                        <Select size="small" v-model="row.shape">
                          <Option value="default">默认</Option>
                          <Option value="circle">圆角</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="横向撑满">
                        <i-switch size="small" v-model="row.long"></i-switch>
                      </FormItem>
                      <FormItem label="禁用">
                        <i-switch size="small" v-model="row.disabled"></i-switch>
                      </FormItem>
                      <FormItemPanel title="点击事件">
                        <CodeEditor v-model="row.onClick.code"></CodeEditor>
                      </FormItemPanel>
                    </div>
                  </Panel>
                </draggable>

              </Form>
            </div>
          </Panel>
        </Collapse>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <FormItemInteractionEditTable :widgetEventCodeConfig="widgetEventCodeConfig"></FormItemInteractionEditTable>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
import FormLayoutCommonUtil from '@/utils/FormLayoutCommonUtil'
import FormWidgetFormMixin from "@/mixin/FormWidgetFormMixin";

import {createHelpers} from 'vuex-map-fields';
const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItemFromTree',
  mutationType: 'designer/updateLayoutItemFromTree',
});

export default {
  name: "FormItemButtonsWidgetForm",
  mixins: [FormWidgetFormMixin],
  props: {},
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    addButton() {
      this.widgetConfig.buttons.push(FormLayoutCommonUtil.buildButtonConfig({}, '按钮'))
    },
    deleteButtonItem(index) {
      this.widgetConfig.buttons.splice(index, 1)
    }
  },
  computed: {
    ...mapFields({

      fieldConfig: 'component.compConfigData.fieldConfig',
      formItemConfig: 'component.compConfigData.formItemConfig',
      widgetConfig: 'component.compConfigData.widgetConfig',
      widgetEventCodeConfig: 'component.compConfigData.widgetEventCodeConfig',

    })
  },
  watch: {}
}
</script>

<style scoped>

</style>
